<!--
 * @Descripttion: 出手鸭小程序
 * @version:1.0.1 
 * @Author: HHL
 * @Date: 2023-10-13 15:07:49
 * @LastEditTime: 2023-10-19 11:18:52
 * @LastEditors:Hui
-->


<template>
  <popup-bottom ref="popup" title="物流信息" @change="onChange">
    <template #default>

      <scroll-view scroll-y class="container">
        <view
          class="item"
          v-for="item in list"
          :key="item.acceptTime"
        >
          <view class="text">{{item.remark}}</view>
          <view class="time">{{item.acceptTime}}</view>
        </view>

        <view class="font-24 color-666 pt-30 pr-30 pb-30 pl-30" v-if="!loading && list.length === 0">
          ：( 暂未查到与您单号相关的物流信息，请稍后再尝试。
        </view>
      </scroll-view>
      
    </template>
  </popup-bottom>
</template>

<script>

import { getOrderExpress } from '@/api'

export default {
  props: {
    expressNo: { type: String, default: '' },
  },

  data() {
    return{
      loading: true,
      list: []
    }
  },

  methods: {
    onOpen() {
      this.$refs.popup.open()
    },

    onClose() {
      this.$refs.popup.close()
    },

    onChange({ show }) {
      if (show) {
        this.loading = true
        try {
          getOrderExpress(this.expressNo).then(({ data, code }) => {
            if (code === 200) {
              this.list = data || []
            }
          })
        } finally {
          this.loading = false
        }
      }
    },
  }
}
</script>

<style lang="scss" scoped>
.container{
  max-height: 700rpx;
  min-height: 400rpx;
  padding-bottom: 30rpx;
  .item {
    margin-bottom: 20rpx;
    padding: 10rpx 30rpx;

    .time {
      font-size: 24rpx;
      color: #999;
      line-height: 28rpx;
    }

    .text {
      font-size: 28rpx;
      line-height: 36rpx;
      color: #333;
    }
  }
}

</style>